<template>
  <div class="my container">
    <header v-if="loginStatus">
      <div class="user-info">
        <!-- <img :src="userInfo.imgUrl" alt=""> -->
      </div>
    </header>

    <section  v-if="loginStatus">
      <div>
        <h6 class="welcome">欢迎您，{{ userInfo.nickName }}</h6>
        <span class="nick-name">在这里您可以找到您的个人账户的概述和访问独家服务</span>
      </div>

      <div class="level">
        <ul>
          <li  @click="$router.push('/myorder')">
            <img src="/images/orderDetail.png" alt="">
            <span>我的订单</span>
            <i class="iconfont icon-fanhui"></i>
          </li>
          <li @click="goPath" >
            <img src="/images/address.png" alt="">
            <span>地址管理</span>
            <i class="iconfont icon-fanhui"></i>
          </li>
          <li  @click="loginOut">
            <img src="/images/logout.png" alt="">
            <span>退出登录</span>
            <i class="iconfont icon-fanhui"></i>
          </li>
          <li  @click="showPop">
            <img src="/images/question.png" alt="">
            <span>常见问题</span>
            <i class="iconfont icon-fanhui"></i>
          </li>
        </ul>
        
      </div>
      <van-popup v-model="show" closeable position="right" :style="{ width:'100%', height: '100%' }">
      <span class="question">Q & A</span>
        <van-collapse v-model="activeName" accordion >
          <van-collapse-item title="Q：我能够使用何种方式来支付订单？" name="1">A：您可以通过支付宝支付进行购买商品及支付相关运费，目前的微信支付功能暂未开题，请谅解！</van-collapse-item>
          <van-collapse-item title="Q：是否支持专卖店取货？" name="2">A：目前暂不支持线上购买专卖店取货。请放心购买，我们为您保证商品的真实性！</van-collapse-item>
          <van-collapse-item title="Q：收货后为什么没有找到发票？" name="3">A：我们会在顾客收到货品后的14天根据客户留存的联系方式递送相关电子发票。</van-collapse-item>
          <van-collapse-item title="Q：我要如何退换货？" name="4">A：客户应在商品交付之日起14日内通过电话400-800-8800联系我们说明其退换货意愿。</van-collapse-item>
          <van-collapse-item title="Q：如何定制礼品？" name="5">A：您可在结算后，通过电话400-800-8800联系我们，为礼品留言。所有订单均赠送礼品包装。</van-collapse-item>
          <van-collapse-item title="Q：注册成为TIZI线上旗舰店会员有什么好处？" name="6">A：注册成功后您有以下好处：<br/>（1）保存购物袋中的商品以便将来查看<br/>（2）方便快捷的查看过往消费记录及详细信息</van-collapse-item>

        </van-collapse>
      </van-popup>
      <div v-if="userInfo.vip == '黑卡会员'" class="vip"><img src="../../public/images/hkvip.png" alt=""></div>
      <div v-if="userInfo.vip == '银卡会员'" class="vip"><img src="../../public/images/ykvip.png" alt=""></div>
    </section>
    <div v-else class="login">
      <h4>
        <van-icon name="contact" />
      </h4>
      <span @click="goLogin">登 录</span>
      <span @click="goRegister">注 册</span>

    </div>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import Tabbar from '@/components/common/Tabbar.vue';
export default {
  name: "My",
  data() {
    return {
      show: false,
      activeName: '0',
      BScroll: '',
      swiperOption: {

        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        speed: 1000,
        slidesPerView: 2,
        pagination: {
          el: '.swiper-pagination'
        }
      },
    }
  },
  components: { Tabbar },
  computed: {
    ...mapState({
      loginStatus: state => state.user.loginStatus,
      userInfo: state => state.user.userInfo
    })
  },
  methods: {
    ...mapMutations(['loginOut']),
    goLogin() {
      this.$router.push('/userLogin')
    },
    goPath() {
      this.$router.push('/path')
    },
    goRegister() {
      this.$router.push('/register')
    },
    showPop() {
       this.show = true;
    }

  }
}
</script>

<style scoped>
header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4.266666rem;
}

.login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to top, #fff, #ccc, #4f4e4e);
}

.login h4 {
  position: absolute;
  top: 168px;
  color: #fff;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
}

/* ::v-deep .van-icon {
  font-size: 70px;
} */

.welcome {
  font-size: 22px;
  padding-left: 20px;
  font-weight: 400;
  margin-top: 20px;
}

.nick-name {
  font-size: 13px;
  padding-left: 20px;
}

.login span {
  padding: 0.56rem 1.8rem;
  font-size: 0.426666rem;
  font-weight: 550;
  color: #1b1b1b;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 999px;

  box-shadow: 0 10px 6px -6px rgba(30, 30, 30, 0.1), 12px 0 8px -8px rgba(50, 50, 50, 0.1);
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
}

.login span:last-child {
  margin-top: 60px;
}

.user-info {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url('../../public/images/background.jpg') no-repeat;

}

.user-info img {
  width: 1.76rem;
  height: 1.76rem;
  border-radius: 50%;
}

.user-info span {
  padding: 0.533333rem 0;
  font-size: 0.48rem;
  font-weight: 500;
}

section {
  flex: 1;
  overflow: hidden;
}

section ul li {
  padding: 0.4rem;
  font-size: 0.426666rem;
}



.level {
  margin-top: 50px;
}

.level ul li::after {
  content: '';
  width: 95%;
  height: 10px;
  display: block;
  margin: 0 auto;
  border-bottom: 1px solid #ccc;
}

.level ul li span {
  display: inline-block;
  position: relative;
  top: -10px;
  margin-left: 15px;
}

.level ul li i {
  display: inline-block;
  font-size: 0.546666rem;
  position: relative;
  left: 200px;
  top: -6px;
  transform: rotateY(180deg);
}

.question {
  position: relative;
  top:10px;
  left: 155px;
  font-size: 28px;
}

.vip {
  text-align: center;
  margin-top: 180px;
}

::v-deep .van-popup__close-icon {
  font-size: 40px;
}

::v-deep .van-hairline--top-bottom {
  margin-top: 100px;
}

::v-deep .van-collapse-item__content {
  font-size: 16px;
}

::v-deep .van-cell__title {
  font-size: 16px;
}

::v-deep .van-collapse-item {
  margin-top: 0.5rem;
}

::v-deep .van-cell__right-icon{
  font-size: 16px;
}
</style>
